Documentation by “on3-step"


“Alice Onepage Multipurpose HTML Template”

Created: 24 Sept, 2017
By: on3-step
Email / skype: desmon25@live.com

Thank you for purchasing my template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. HTML Structure
  2. CSS Files
  3. Website Documentation
  4. Contact Form
  5. Request Form

A) HTML structure - top

This template using Bootstrap, All the information within main content is nested within a div with id- name "content-wrapper" for all file. If you need more information you can read Bootstrap documentation on this link

 

1. Sample html structure page website

<div id="content-wrapper"> <!-- website --> <header class="init"> <!-- nav --> <div class="navbar-default-white navbar-fixed-top"> <div class="container"> <div class="row">
<!-- mainmenu start --> <div class="white" id="main-menu"> <nav id="menu-center">

<!-- CONTENT NAV --> </nav> </div> <!-- mainmenu end --> </div> </div> <!-- nav end --> </header>
<!-- main menu block --> <section aria-label="menu" class="blackpage-menu" id="menu-block"> <div class="wrap-menu"> <div class="wrap-menu-child"> <!-- CONTENT NAV --> </div> </div> </section> <!-- main menu block end -->
<!-- home --> <section aria-label="home" class="mainbg parallax-window" data-parallax="scroll" data-image-src="img/bg-1.jpg" id="home">
<div class="container"> <div class="row">

<!-- CONTENT HERE --> </div> </div>

</section> <!-- home end -->
<!-- section --> <section class="whitepage" id="about">
<div class="container"> <div class="row">

<!-- CONTENT HERE -->

</div> </div> </section> <!-- section end -->

</div> <!-- website end -->


B) CSS Files - top

These are css files used in this template:
  1. bootstrap.min.css - css by Twitter boostrap
  2. animated-alice.css - used for element animation all of page
  3. alice-style.css - main css files (you can edit color, font, etc from this css)
  4. queries-alice.css - used for responsive style

You can change almost all styles from alice-style.css file.

/* CSS Document */

/* 
*
*
[Table of contents]
*
*
*

	font-alice / @import url
	reset / html
	general / body
	space / .space-single
	button-alice / button
	devider / .devider
	section / section
	no select / .noselect
	wrapper / .content-wrapper
	whitepage / .whitepage
	preloader / .preloader
	navigation / .navbar-default
	subheader / #subheader
	home / #home
	background img  / .mainbg
	feature / .features
	about / .h-bg
	projects / .no-gutter
	testimony / #owl-testimonial
	price / .wrap-price
	recent post / .recent-post 
	team / #owl-team
	brand / .brand-page
	contact / #form-contact 
	address / .wrapaddres
	footer / .subfooter
	social-icons / .social-icons
	totop / #totop
	Blog & article / #content
	Blog comment / #blog-comment
	
*
*
*/


C) Website Documentation - top

/*

Main Code
Jquery alice.js
Jquery sticky.js
Jquery nav.js
/* you can add and use animation in all element inside (not include popup ajax) example below */ class="onStep" add class onStep in every element tag for animation triger data-animation="fadeInUp" add class animation here from animated-alice.css data-time=0 is delay of element animation */

D) Contact Form - top

open send.php file change your email here:

    $email_to = "desmonlatandos@gmail.com"; // change with your email
    $name     = $_POST['name'];  
    $email    = $_POST['email'];
    $subject   = $_POST['subject'];
    $message    = $_POST['message'];
    
    $headers  = "From: $email\r\n";
    $headers .= "Reply-To: $email\r\n";
    
    if(mail($email_to, $subject, $message, $headers)){
    echo "success";       
    } 
    else{
    echo "failed";     
    }  

E) Request Form - top

open send.php file change your email here:
    $email_to = "desmonlatandos@gmail.com"; // change with your email
    $selectarea = $_POST['selectarea'];
    $phonebook     = $_POST['phonebook'];
    $person   = $_POST['person'];
    $name     = $_POST['name'];
    $email    = $_POST['email'];
    $subject   = $_POST['subject'];
    $mainmessage    = $_POST['message'];
    
    //$message    = $_POST['message'];
    $message    = "
    Select Area : $selectarea
    Name : $name
    Phone : $phonebook
    Email : $email
    Pesan : $mainmessage
    ";

    $headers  = "From: $email\r\n";
    $headers .= "Reply-To: $email\r\n";

    if(mail($email_to, $subject, $message, $headers)){
        echo "success";
    }
    else{
        echo "failed";
    }

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist. If you have a more general question relating to the template you might consider visiting the forums and asking your question in the "Item Discussion" section.

on3-step

Go To Table of Contents